<template>
<div class="singlePage">
  <leftMenu></leftMenu>
    <div class="s-singlePage spage">
      <searchForm :keys="['sname']" @on-search="onSearch" ref="searchForm">
        <addSystemBtn @after-op="afterOp"></addSystemBtn>
      </searchForm>
      <div class="table">
        <el-table
            :header-cell-style="{background:'#F8F9FA'}"
            :data="tableData"
            v-loading="loading"
            :height="'calc(100% - 40px)'"
            style="width: 100%">
          <el-table-column
              prop="name"
              label="系统名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="code"
              label="系统编码">
          </el-table-column>
          <el-table-column
              prop="ip"
              label="系统IP">
          </el-table-column>
          <el-table-column
              prop="status"
              label="状态">
            <template slot-scope="scope">
              {{statusMap[scope.row.status]}}
            </template>
          </el-table-column>
          <el-table-column
              prop="createdByName"
              label="创建人">
          </el-table-column>
          <el-table-column
              prop="createdTime"
              label="创建时间">
          </el-table-column>
          <el-table-column
              prop="address"
              width="200px"
              label="操作">
            <template slot-scope="scope">
              <seeSystemBtn :params="scope.row" ></seeSystemBtn>
              <editSystemBtn :params="scope.row" @after-op="afterOp"></editSystemBtn>
              <apiSystemStatusChange :params="scope.row" @after-op="afterOp"></apiSystemStatusChange>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page="pageInfo.page" :pageSize="pageInfo.pageSize" :total="pageInfo.total" @pageChange="pageChange" @handleSizeChange="handleSizeChange"></pagination>
      </div>
    </div>
</div>
</template>

<script>
import leftMenu from "@/components/leftMenu";
import searchForm from "@/views/APImanage/module/searchForm";
import dict from "@/util/dict";
import pagination from "@/components/pagination";
import addSystemBtn from "@/views/APImanage/module/addSystemBtn";
import seeSystemBtn from "@/views/APImanage/module/seeSystemBtn";
import editSystemBtn from "@/views/APImanage/module/editSystemBtn";
import apiSystemStatusChange from "@/views/APImanage/module/apiSystemStatusChange";
export default {
  name: "APIsystem",
  components:{
    leftMenu,
    searchForm,
    pagination,
    addSystemBtn,
    seeSystemBtn,
    editSystemBtn,
    apiSystemStatusChange
  },
  mounted() {
    this.getApiSystemList()
  },
  methods:{
    afterOp(){
      this.getApiSystemList()
    },
    pageChange(page){
      this.pageInfo.page = page
      this.getApiSystemList()
    },
    handleSizeChange(size){
      this.pageInfo.pageSize = size
      this.getApiSystemList()
    },
    onSearch(){
      this.pageInfo.page = 1
      this.getApiSystemList()
    },
    getApiSystemList(){
      let params = {
        page:this.pageInfo.page - 1,
        pageSize:this.pageInfo.pageSize,
        name:this.$refs.searchForm.form.name
      }
      this.loading = true
      this.$api.getApiSystemList(params).then(res=>{
        this.tableData = res.data.data
        this.pageInfo.total = res.data.recordsTotal
        this.loading = false
      })
    },
  },
  data(){
    return {
      tableData:[],
      loading:false,
      statusMap:{
        0:'禁止',
        1:'启用',
        2:'禁止',
      },
      pageInfo:{
        ...dict.pageInfo
      },
    }
  },
}
</script>

<style scoped lang="less">
.singlePage{
  display: flex;
.table{
  height: calc(100% - 70px);
}
}
</style>